<!DOCTYPE html>
<html lang="cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文档预览</title>
    <link th:href="@{/frame/layui/css/layui.css}" rel="stylesheet">
</head>
<body>
<div class="layui-fluid" style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-row layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" th:text="${d_document.title}"></div>
                <div class="layui-card-body" style="text-align: center;height: 1440px">
                    <object th:data="${'/document/getSVG?stname='+d_document.storedname+'&pageId=1'}"
                            width="100%" height="100%" id="pageData"></object>
                </div>
            </div>
            <div id="docPages"></div>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/frame/layui/layui.js}"></script>
<script>
    layui.use(['laypage'], function () {
        const laypage = layui.laypage;
        laypage.render({
            elem: 'docPages',
            count: [[${d_document.pages}]],
            limit: 1,
            layout: ['prev', 'page', 'next', 'skip'],
            jump: function (obj, first) {
                if (!first) {
                    document.getElementById('pageData').setAttribute('data', "[[@{/document/getSVG}]]?stname=[[${d_document.storedname}]]&pageId=" + obj.curr);
                }
            }
        });
    });
</script>
</body>
</html>